<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
        <link rel="shortcut icon" href="favicon.ico" />
		<link rel="stylesheet" type="text/css" href="sass/css/login.css" />
		<link rel="stylesheet" type="text/css" href="sass/css/common.css" />
	</head>

	<body>
		<div class="loginHead">
			<div class="loginBar">
				<div class="loginBarInner">
					<div class="logo">
						<h1>
				     		<a href="javascript:;">
				     			<img src="loginRegisterImages/logo5.jpg" alt="" />
				     		</a>
				     	</h1>
					</div>
					<div class="ad">
						<span class="zhengban">正版好图书</span>
						<span class="liujiu">全场满69包邮</span>
						<span class="yizhe">特价书一折起</span>
					</div>

				</div>
			</div>
		</div>

		<div class="content">
			<div class="w1000">
				<div class="loginForm">
					<div class="loginTitle">
						<b>用户登陆</b>
					</div>
					<div class="registerInputWrap">
						<div class="inputItem">
							<div class="labIptWrap">
								<div class="label">
									<span>用户名:</span>
								</div>
								<div class="inputWrap">
									<span class="inputPad">
	    								<input type="text" name="userName" id="userName" autocomplete="off" placeholder="请输入用户名"/>
	    							</span>
								</div>
								<div class="successWrap">

								</div>
							</div>
							<div class="megTip">
								<span>请输入用户名</span>
							</div>
						</div>

						<div class="inputItem">
							<div class="labIptWrap">
								<div class="label">
									<span>密码:</span>
								</div>
								<div class="inputWrap">
									<span class="inputPad">
	    								<input type="text" name="password" id="password" autocomplete="off" placeholder="请输入密码"/>
	    							</span>
								</div>
								<div class="successWrap">

								</div>
							</div>
							<div class="megTip">
								<span>请输入密码</span>
							</div>
						</div>

						<div class="loginBtn">
							<a href="javascript:;">登陆</a>
						</div>
						<div class="otherLink">
							<a href="javascript:;" class="left">忘记密码？</a>
							<a href="register.html" target="_blank" class="right">新用户注册>></a>
						</div>
						<div class="otherLoginWay">
							<span>使用以下账号登陆</span>
						</div>
						<div class="otherlogin">
							<a href="javascript:;" class="weibo">
								<span class="icon"></span>
								微博
							</a>
							<a href="javascript:;" class="QQ">
								<span class="icon"></span>
								QQ
							</a>
							<a href="javascript:;" class="wx">
								<span class="icon"></span>
								微信
							</a>
							<a href="javascript:;" class="baidu">
								<span class="icon"></span>
								百度
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="footer">
			<div class="registerfoot">
				<div class="footnav">
					<ul>
						<li>
							<a href="javascript:;">介绍本站</a>
						</li>
						<li>
							<a href="javascript:;">帮助中心</a>
						</li>
						<li>
							<a href="javascript:;">联系我们</a>
						</li>
						<li>
							<a href="javascript:;">招聘英才</a>
						</li>
					</ul>
				</div>
				<div class="cert">
					<div class="w820 clear_fix">
						<div class="credit_certifica">
							<a href="javascript:;"><img class="imgs" src="loginRegisterImages/chengxin.jpg" /></a>
							<a href="javascript:;"><img class="imgs" src="loginRegisterImages/ectrust.gif" /></a>
						</div>
						<div class="licence">
							<p>
								<a href="javascript:;">京ICP备09013606号-3</a>
								<a href="javascript:;">京信市监发[2002]122号</a>
								<span>
	     	  	      				海淀公安分局备案编号：1101083394
	     	  	      			</span>

							</p>
							<p>
								<a href="javascript:;">营业执照</a>
								<a href="javascript:;">出版物经营许可证 京出发京批字第直110071</a>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function my$(str) {
			return document.getElementById(str)
		}
	</script>
	<script type="text/javascript">
		var ipt = document.querySelectorAll("input");
		var items = document.querySelectorAll(".inputItem")
		console.log(ipt)
		for(let i = 0; i < ipt.length; i++) {
			ipt[i].onfocus = function() {
				items[i].className = "inputItem focus";

			}
			ipt[i].onblur = function() {
				//选中tips
				//				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
				//				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "5-11位字符(不包含特殊字符)";
				this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#000";

				//让类名变为原来没有focus的情况
				this.parentNode.parentNode.parentNode.parentNode.className = "inputItem";
				//回到开始的颜色
				//				this.parentNode.parentNode.style.borderColor = "#d6d6d6";
			}
		}

//		my$("userName").onblur = function() {
//
//			//选中tips
//			//				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
//			//				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "5-11位字符(不包含特殊字符)";
//			this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#000";
//
//			//让类名变为原来没有focus的情况
//			this.parentNode.parentNode.parentNode.parentNode.className = "inputItem";
//			//回到开始的颜色
//			//				this.parentNode.parentNode.style.borderColor = "#d6d6d6";
//
//		}
//
//		//密码的验证
//		//用户名的验证
//		my$("password").onblur = function() {
//
//			//选中tips
//			//				this.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none";
//			//				this.parentNode.parentNode.parentNode.nextElementSibling.innerHTML = "5-11位字符(不包含特殊字符)";
//			this.parentNode.parentNode.parentNode.nextElementSibling.style.color = "#000";
//
//			//让类名变为原来没有focus的情况
//			this.parentNode.parentNode.parentNode.parentNode.className = "inputItem";
//			//回到开始的颜色
//			//				this.parentNode.parentNode.style.borderColor = "#d6d6d6";
//
//		}

		//点击事件
//		var btn = document.querySelector(".loginBtn");
//		console.log(btn)
		 $(".loginBtn").eq(0).click(function(){
		 	var name = $("#userName").val();
		 	var psd = $("#password").val();
		 	console.log(name);
		 	console.log(psd);
		 
		 	var url="http://jx.xuzhixiang.top/ap/api/login.php?username="+name+"&password="+psd;
//		 	var url = "api/login.php?username="+name+"&password="+psd;
		 	$.ajax({
		 		type:"get",
		 		url:url,
		 		async:true,
		 		success:function(res){
		 			var res =JSON.parse(res);
		 			console.log(res)
		 			jQuery.cookie('token', res.data.id, { expires: 30,path: '/'});

//			      	   	   Cookie.setCookie("token",res.data.id,30,"/");
                    jQuery.cookie('username', res.data.username, { expires: 30,path: '/' });
		      	   
                    location.href="index.html";
		 		}
		 	});
		 })
	</script>

</html>